<script setup>

import {onMounted, reactive, ref} from "vue";
import store from "@/store";
import router from "@/router";
import {useRoute} from "vue-router";
import {
  find,
  getMerchantById, merchantPass,
  searchCity,
  searchDistrict,
  searchMerchants,
  searchProvince,
  update
} from "@/api/merchant";
import {cancel, dishPass} from "@/api/dish";
import {Plus} from "@element-plus/icons-vue";
import {open_error, open_success} from "@/utils/common";

const route = useRoute();

const formLabelWidth = "100px";


// 提交的表单
const data = ref({
  id: null,
  shopName: "",
  image_before: "",
  image: "/null",
  sellerName: "",
  shopTelephone: "",
  sellerTelephone: "",
  password: "",
  provinceName: "",
  provinceId: null,
  cityName: "",
  cityId: null,
  districtName: "",
  districtId: null,
  status: null,
});

// 三层地区
const cities = ref([]);

const provinces = ref([]);

const districts = ref([]);

const server_image = ref("");

const merchants = ref([]);

onMounted(() => {
  data.value.id = route.params.id;
  // 查询id的
  find(data.value).then((res) => {
    server_image.value = res.data.image;
    data.value = res.data;
    console.log(data);
    // 查询省市区
    searchCity(data.value).then((ans) => {
      cities.value = ans.data;
    });
    searchDistrict(data.value).then((ans) => {
      districts.value = ans.data;
    });
    searchProvince().then((ans) => {
      provinces.value = ans.data;
    });
  });
});


const changeImg = (res) => {
  data.value.image_before = data.value.image;
  data.value.image = res.data;
}
const changeImg1 = (res) => {
  data.value.idCardImage = res.data;
}
const changeImg2 = (res) => {
  data.value.license = res.data;
}
const changeImg3 = (res) => {
  data.value.certificate = res.data;
}

const provinceChange = (Form) => {
  console.log(Form);
  searchCity(Form).then((res) => {
    cities.value = res.data;
  });
}

const cityChange = (Form) => {
  searchDistrict(Form).then((res) => {
    districts.value = res.data;
    console.log(districts);
  })
}


// 提交当前更改
const commit_change = () => {
  if(data.value.image_before !== " " &&
      data.value.image_before !== "") {
    cancel({image: data.value.image_before});
  }
  data.value.id = route.params.id;
  data.value.updateTime = new Date().format("yyyy-MM-dd hh:mm:ss");
  console.log(data.value);
  update(data.value).then((res) => {
    console.log(res);
    router.push("/merchants");
  });
}


// 单个通过审核
const clickPass = () => {
  const id_arrays = reactive([]);
  id_arrays.push(data.value.id);
  merchantPass(id_arrays).then((res) => {
    if(res.state === 0) {
      open_success("操作成功");
      router.push("/merchants");
    } else {
      open_error(res.message);
    }
  })
}




const cancel_change = () => {
  router.push("/merchants");
}

</script>

<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">商家详情</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><a href="/merchants">商家列表</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>{{data.name}}商家的详情页</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-form :model="data">
      <el-form-item label="商家图片" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            name="imageFile"
            action="/api/upload/image"
            :show-file-list="false"
            :on-success="changeImg"
        >
          <img v-if="data.image" :src="data.image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证图片" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            name="imageFile"
            action="/api/upload/image"
            :show-file-list="false"
            :on-success="changeImg1"
        >
          <img v-if="data.idCardImage" :src="data.idCardImage" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="营业执照" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            name="imageFile"
            action="/api/upload/image"
            :show-file-list="false"
            :on-success="changeImg2"
        >
          <img v-if="data.license" :src="data.license" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="食品安全许可证" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            name="imageFile"
            action="/api/upload/image"
            :show-file-list="false"
            :on-success="changeImg3"
        >
          <img v-if="data.certificate" :src="data.certificate" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商店名" :label-width="formLabelWidth">
        <el-input v-model="data.shopName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="data.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户姓名" :label-width="formLabelWidth">
        <el-input v-model="data.sellerName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号码" :label-width="formLabelWidth">
        <el-input v-model="data.idCard" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="银行卡号码" :label-width="formLabelWidth">
        <el-input v-model="data.bankCard" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="商店电话" :label-width="formLabelWidth">
        <el-input v-model="data.shopTelephone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户电话" :label-width="formLabelWidth">
        <el-input v-model="data.sellerTelephone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="平台提成(%)" :label-width="formLabelWidth">
        <el-input v-model="data.commission" autocomplete="off" />
      </el-form-item>
      <!--      下面三个之后做成选择的格式  -->
      <el-form-item label="所在省" :label-width="formLabelWidth">
        <el-select v-model="data.provinceId" clearable placeholder="Select"
                   @change="provinceChange(data)" >
          <el-option
              v-for="item in provinces"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在市" :label-width="formLabelWidth">
        <el-select v-model="data.cityId" clearable placeholder="Select"
                   @change="cityChange(data)"
                   :disabled="data.provinceId===null || data.provinceId===''">
          <el-option
              v-for="item in cities"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在区" :label-width="formLabelWidth">
        <el-select v-model="data.districtId" clearable placeholder="Select"
                   :disabled="data.cityId===null || data.cityId===''">
          <el-option
              v-for="item in districts"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" plain @click="commit_change">提交修改</el-button>
        <el-button type="warning" plain @click="cancel_change">取消修改</el-button>
      </el-form-item>

      <el-divider content-position="left">审核通过</el-divider>
      <el-button v-if="data.status===0" type="success" @click="clickPass">通过审核</el-button>
      <el-button v-if="data.status!==0" type="success" :disabled="true">已通过审核</el-button>
    </el-form>
  </el-card>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>